<template>
    
    <div class="top">
        <div class="logoname">网易云音乐</div>
        <div>
            <i @click="back" class="el-icon-arrow-left topbuttom"></i>
            <i @click="noback" class="el-icon-arrow-right topbuttom"></i>
        </div>
        <input @focus="inputhand" @blur="blur" class="input" @keyup.enter='search' @input="seachinput"  v-model="inputvalue" />
        <div class="sjianyi" v-show="sjianyi">
            <div @click="seachcilck(item.id)" class="sjianyidiv" v-for="item in seachloding" :key="item.id">
                <div>{{item.name}}</div>
                <div>{{item.artist.name}}</div>
            </div>
        </div>
        <!-- <input class="input" type="text"  @click="topinput" v-model="inputvalue"> -->
        <!-- <div class="input"> -->
        <!-- <el-input class="input" v-model="input" placeholder="请输入内容" size = 'mini'></el-input> -->
        <!-- </div> -->
        <div class="toplogin">
            <img v-if="$store.state.userimg === '' " @click="isshowhand" :src="logoimgs" alt="">
            <img v-else @click="isshowhand" :src="$store.state.userimg" alt="">
            <span>{{$store.state.username}}</span>
        </div>
        <login @isshowzi='isshowzi' v-if="isshow" class="login"></login>

    </div>
</template>
<script>
import login from '@/views/login'
import http from '@/http/http.js'
import logoimg from '@/assets/topimg/wyylogo.jpg'

export default {
    data() {
        return {
            input:'',
            inputvalue:'请输入内容',
            loginname:'点击头像登录',
            isshow:false,
            userid:'',
            logoimgs:logoimg,
            seachloding:[], //搜索建议
            sjianyi:false, //搜索框显示隐藏
            searchid:'' //搜索框歌曲id
    
            // imgs:'@/assets/topimg/weidengl.jpg'
        }
    },
    methods: {
        // mouisjianyi(){
        //     this.sjianyi = true
        //     console.log(this.sjianyi)
        // },
        //搜索列表点击
        seachcilck(id){
            this.sjianyi = true
            console.log('dd')
            // this.$message({
            // // message: '当前歌单添加到正在播放的歌单',
            // // type: 'success'
            // });
            console.log(id)
            //通过id请求音乐url地址
            http({
                url:'/song/url',
                params:{
                    id,
                },      
            }).then(res=>{
                if(res.data.data[0].code == 404){
                    this.$message.error('播放失败 建议直接搜索试试');
                }
                // console.log(res)
                // // this.$store.commit('musicurlhandle',res.data.data[0].url)
                // this.$store.commit('isplaybofang')   
            })
            //点击的歌曲信息传入
            // this.$store.commit('musicuserhandle',value)      
            
            
        },
        //失去焦点
        blur(){
            setTimeout(res=>
                this.sjianyi = false
            ,500)
            
        },
        //搜索提示
        seachinput(){
                http({
                url:'/search/suggest',
                params:{
                    keywords:this.inputvalue
                }
                }).then(res=>{
                    if(res.data.code ===200)
                    this.seachloding = res.data.result.albums
                    console.log(this.seachloding)
                    


                })
        },
        //搜索框获得焦点
        inputhand(){
            this.inputvalue = ''
            this.sjianyi = true
        },
        //搜索
        search(){
            this.$router.push({
                name:'search',
                params:{
                    name:this.inputvalue
                }
            }).catch(err => err)
// 　　　　   console.log(this.inputvalue)
            // console.log(this.$store.state.searchname)
            //  http({
            //     url:'/search',
            //     params:{
            //         keywords:this.inputvalue
            //     }
            // }).then(res=>{
            //     console.log(res)
                this.$store.commit('searnames',this.inputvalue)
            //     this.$store.commit('searchname',res.data.result.songs)
            // })
            

        },


        isshowzi(isshowdata,data){
            console.log(data)
            this.isshow = isshowdata
            this.$store.state.username = data.nickname
            this.$store.state.userimg = data.avatarUrl
            this.$store.state.userid = data.userId
        },
        isshowhand(){
            if(this.$store.state.login === 200){
                this.$router.push({
                    name:'user',
                    params:{
                        id:this.$store.state.userid
                    }
                }).catch(err => err)
            }else{
            this.isshow = true

            }
        },
        topinput(){
            this.inputvalue = ''
        },

        back(){
            this.$router.go(-1);
        },

        noback(){
            this.$router.go(1);

        }
    },
    components:{
        login
    }
}
</script>
<style lang="less" scoped>
.sjianyi{
    position: absolute;
    top: 43px;
    left: 200px;
    width: 250px;
    height: 200px;
    border: 1px solid #666;
    border-radius: 10px;
    box-shadow:2px 2px 5px #666;  //边框阴影
    // opacity: 0.5;
    background-color: white;
    overflow: hidden;
    .sjianyidiv{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 12px;
        color: #666;
        overflow: hidden;
        padding: 2px 5px;
        div{
            cursor:pointer;
        }
        
    }
    .sjianyidiv:hover{
        background-color: pink;
        
    }

}
.login{
    position: absolute;
    right: 10px;
    top:58px;
    z-index: 999;
}
.top{
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    flex-direction:row;
    align-items: center;
    width: 100%;
    height: 60px;
    background-color:#ec4141;
    z-index: 998;
    .logoname{
        color: white;
        margin-left: 20px;
        font-size: 18px;
        margin-right: 20px;
        cursor: pointer;
        
        
    }
}
.topbuttom{
    // flex-grow:1;
    background-color: #e13e3e;
    font-size: 12px;
    transform: scale(0.8);
    padding: 5px;
    height: 22px;
    width: 22px;
    color: white;
    border-radius: 50%;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
}
.input{
    width: 200px;
    height: 30px;
    color: white;
    border: none;
    // transform: scale(0.8);
    background-color: #e13e3e;
    outline: 0;
    padding-left: 10px;
    // padding: 0 15px;
    // transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    border: none;
    border-radius: 15px;
    margin-left: 10px;
}
.toplogin{
    display: flex;
    position: fixed;
    right: 0;
    flex-direction:row;
    align-items: center;
    width: 200px;
    height: 30px;
    margin-right: 30px;
    color: white;

}
.toplogin img{
    float: left;
    width: 35px;
    height: 35px;
    margin-right: 10px;
    border-radius: 25px;
    cursor: pointer;
}
</style>